<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .titleBox{
            width: 100vw;
            height: 5vh;
            display: flex;
            border-bottom: 1px solid rgba(200, 200, 200, 0.5);
        }
        .titleBox #pinnedImage{
            /* position: absolute; */
            /* position: relative;
            left: 280px; */
            float: right;
            width: 50px;
            height: 100%;
            transition: all 0.5s;
        }
 /*        .titleBox #pinnedImage:hover{
            transform: rotate3d(0,0,1,-45deg);
        } */
        .titleBox .dailog{
            width: 700px;
            height: 100%;
            /* background-color: red; */
            -webkit-app-region: drag;
        }
        .titleBox img:nth-child(2){
            /* position: relative;
            left: 300px; */
            cursor: pointer;
        }
        .set-text,
        .setSleepText{
            color: #fff;
        }
        body{
            background: rgba(0, 200, 200, 0.8);
        }
        .one,
        .sleepClass{
            width: 100vw;
            height: 30vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .hourClass,
        .minClass{
            margin-right: 10px;
            width: 100px;
            height: 50px;
            background-color: #fff;
            border-radius: 5px;
            border: 1px solid #000;
        }
        .h_switch_class{
            position: absolute;
            left: 350px;
            top: 250px;
            width: 50px;
            height: 150px;
            /* background-color: red; */
            overflow-y: auto;
        }
        #h_switch_class_master{
            width: 100%;
            height: 50px;
            /* background-color: skyblue; */
            /* position: absolute;
            left: 370px;
            top: 300px;
            font-size: 20px;
            -webkit-text-stroke:1px #000;
            color: #fff;
            user-select: none;
            cursor: pointer; */
        }
        #h_switch_class_master p{
            /* border: 1px solid #000; */
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            -webkit-text-stroke:1px #000;
            /* text-shadow: 2px 1px #000; */
            user-select: none;
            cursor: pointer;
        }
        .h_switch_class_begin,
        .h_switch_class_2,
        .h_switch_class_3,
        .h_switch_class_4,
        .h_switch_class_5,
        .h_switch_class_6,
        .h_switch_class_7,
        .h_switch_class_8{
            width: 100%;
            height: 37px;
            /* background-color: skyblue; */
           /*  position: absolute;
            left: 370px;
            top: 250px;
            font-size: 20px;
            color: #fff; */
        }
        #h_switch_0_no_action,
        #h_switch_master_no_action,
        #h_switch_2_no_action,
        #h_switch_3_no_action,
        #h_switch_4_no_action,
        #h_switch_5_no_action,
        #h_switch_6_no_action,
        #h_switch_7_no_action,
        #h_switch_8_no_action{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            user-select: none;
            cursor: pointer;
            /* -webkit-text-stroke:1px #000; */
        }
    </style>
</head>
<body>
    <div class="titleBox">
        <div class="dailog"></div>
        <img src="images/Pinned_xie.svg" alt="" id="pinnedImage" onclick="change()" />
        <img src="images/close.svg" alt="" onclick="clickClose()"/>
    </div>
    <div class="one">
        <label class="set-text">设置下班时间</label>
        <input type="text" placeholder="时" id="time_h_down"/>:
        <input type="text" placeholder="分" id="time_m_down"/>
        <!-- <div class="hourClass"></div>
        <div class="minClass"></div> -->
<!--         <input type="text" readonly="readonly" id="time_h_down"/>
        <input type="text" readonly="readonly" id="time_m_down"/> -->        
    </div>
    <div class="sleepClass">
        <label class="setSleepText">设置休息时间(默认1小时半)</label>
        <input type="text" placeholder="时" id="sleep_h_time" />
        <input type="text" placeholder="分" id="sleep_m_time" />
    </div>
    <button onclick="completeFunc()">完成</button>
   <div class="h_switch_class">
        <!-- <div class="h_switch_class_begin" onclick="mouseUpClick(0)" id="h_switch_0_no_action"><p>0</p></div>
        <div id="h_switch_class_master" onclick="mouseUpClick(1)"><p>1</p></div>
        <div class="h_switch_class_2" onclick="mouseUpClick(2)" id="h_switch_2_no_actionv"><p>2</p></div>
        <div class="h_switch_class_3" onclick="mouseUpClick(3)" id="h_switch_3_no_action"><p>3</p></div>
        <div class="h_switch_class_4" onclick="mouseUpClick(4)" id="h_switch_4_no_action"><p>4</p></div>
        <div class="h_switch_class_5" onclick="mouseUpClick(5)" id="h_switch_5_no_action"><p>5</p></div>
        <div class="h_switch_class_6" onclick="mouseUpClick(6)" id="h_switch_6_no_action"><p>6</p></div>
        <div class="h_switch_class_7" onclick="mouseUpClick(7)" id="h_switch_7_no_action"><p>7</p></div>
        <div class="h_switch_class_8" onclick="mouseUpClick(8)" id="h_switch_8_no_action"><p>8</p></div> -->
   </div>
</body>
<script src="htmlJS.js"></script>
</html>